<template>
  <div class="ListGoods">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-dropdown-menu class="navList">
      <!-- 分类 -->
      <van-dropdown-item title="分类" ref="item" class="classNav">
        <van-panel :title="item.title.name" v-for="item in BodyNavList" :key="item.title.id">
          <van-row >
            <van-col span="6" v-for="newItm in item.list" :key="newItm.id" class="classNavP" @click="classNav.push(newItm.id)" ><p>{{newItm.name}}</p></van-col>
          </van-row>
        </van-panel>
        <van-row class="navListBtnBox">
          <van-col span="12">
            <van-button block plain type="default" size="small" class="NavRemoveBtn" @click="classNav=[]">清除</van-button>
          </van-col>
          <van-col span="12">
            <van-button block type="info" size="small" @click="classOnGetJson">确认</van-button>
          </van-col>
        </van-row>
      </van-dropdown-item>
      <!-- 价格 -->
      <van-dropdown-item v-model="value1" :options="option1" />
      <!-- 销量 -->
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>

    <!-- 下拉刷新页面数据 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- Body内容 -->
      <van-list v-model="BodyListloading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="container">
          <van-row gutter="10">
            <van-col
              class="GoodsBox"
              span="12"
              v-for="item in BodyListData"
              :key="item.id"
              @click="$router.push('/goods?id='+item.id)"
            >
              <!-- 图片 -->
              <van-image :src="item.img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <p class="GoodsName">{{item.name}}</p>
              <p class="GoodsPrice">￥{{item.price}}</p>
            </van-col>
          </van-row>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { getCommodityList, getCommodityClasses } from '@/api/api'

export default {
  name: 'listgoods',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      count: 0,
      isLoading: false,
      WebName: '商品列表',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部价格', value: 0 },
        { text: '1000以下', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ],
      BodyListData: [],
      BodyNavList: [],
      classNav: [],
      BodyListloading: false,
      finished: false
    }
  },

  computed: {},

  watch: {},

  created () {
    var data = { parentId: this.$route.query.class }
    this.GetJson(data)
    this.GetNavJson()
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 列表数据请求
    GetJson (data) {
      let postData = data
      getCommodityList(this.$qs.stringify(postData))
        .then(res => {
          console.log(res.data.data)
          this.BodyListData = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 列表数据请求
    GetNavJson () {
      let postData = { parentId: this.$route.query.class }
      getCommodityClasses(this.$qs.stringify(postData))
        .then(res => {
          console.log(res.data.data)
          this.BodyNavList = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 500)
    },
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.BodyListData.push(this.BodyListData.length + 1)
        }
        // 加载状态结束
        this.BodyListloading = false

        // 数据全部加载完成
        // if (this.BodyListData.length >= 40) {
        //   this.finished = true
        // }
      }, 500)
    },
    classOnGetJson () {
      // console.log(this.classNav)
      var data = { parentId: this.$route.query.class, threeParentId: this.classNav }
      this.GetJson(data)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.ListGoods {
  background-color: #f6f6f6;
  height: 100%;
  .navList {
    .navListBtnBox {
      .van-col {
        button {
          border-radius: 0px;
        }
        .NavRemoveBtn {
          border: 0.02667rem solid #ffffff;
        }
      }
    }
    .classNav{
      .classNavP{
        font-size: 10px;
        text-align: center;
        color: #888888;
      }
    }
  }
  .van-pull-refresh {
    height: calc(100% - 50px - 50px);
    overflow-y: auto;
    .GoodsBox {
      margin-bottom: 10px;
      .van-image {
        img {
          font-size: 0;
        }
      }
      .GoodsName {
        font-size: 14px;
        color: #333333;
        margin: 0;
      }
      .GoodsPrice {
        font-size: 14px;
        color: #ff7c00;
        margin: 0;
      }
    }
  }
}
</style>
